<template>
  <div>
    昵称: <input type="text" v-model="userinfo.name"/> <br /><br /><br />
    性别:<input type="radio" name="sex" id="" value="男" v-model="userinfo.sex"/>男
    <input type="radio" name="sex" id="" value="女" v-model="userinfo.sex"/>女
    <br /><br /><br />
    生日：<input type="date" v-model="userinfo.birthday"/> <br /><br /><br />
    兴趣爱好：<br />
    <input type="checkbox" name="" id="" value="1" v-model="userinfo.hobby" />美食
    <input type="checkbox" name="" id="" value="2" v-model="userinfo.hobby" />动漫
    <input type="checkbox" name="" id="" value="3" v-model="userinfo.hobby" />摄影
    <input type="checkbox" name="" id="" value="4" v-model="userinfo.hobby" />电影
    <input type="checkbox" name="" id="" value="5" v-model="userinfo.hobby" />体育<br />
    <input type="checkbox" name="" id="" value="6" v-model="userinfo.hobby" />财经
    <input type="checkbox" name="" id="" value="7" v-model="userinfo.hobby" />音乐
    <input type="checkbox" name="" id="" value="8" v-model="userinfo.hobby" />游戏
    <input type="checkbox" name="" id="" value="9" v-model="userinfo.hobby" />科技
    <input type="checkbox" name="" id="" value="10" v-model="userinfo.hobby" />旅游<br />
    <input type="checkbox" name="" id="" value="11" v-model="userinfo.hobby" />文学
    <input type="checkbox" name="" id="" value="12" v-model="userinfo.hobby" />工艺
    <input type="checkbox" name="" id="" value="13" v-model="userinfo.hobby" />汽车
    <input type="checkbox" name="" id="" value="14" v-model="userinfo.hobby" />时尚
    <input type="checkbox" name="" id="" value="15" v-model="userinfo.hobby" />宠物
    <br /><br /><br />
    个性签名：<br><textarea name="" id="" cols="30" rows="10" v-model="userinfo.sign"></textarea>
    <br /><br /><br />
    <button id="btn1" @click="up()">保存</button>
  </div>
</template>

<script>
  import axios from "axios";
export default {
  name: "Xx",
  data() {
    return {
      userinfo:{
        id:'',
        uid:'',
          name:'',
          sex:"",
          birthday:'',
          hobby:[],
          sign:'',
      }
    };
  },
  methods: {
    // print() {
    //   console.log(this.arr.join(","));
    // },
    up(){
      console.log(22,this.userinfo,sessionStorage.getItem("id"))
      this.userinfo.id = sessionStorage.getItem("id");
      this.userinfo.uid = sessionStorage.getItem("id");
      this.userinfo.hobby=this.userinfo.hobby.join(",");
      axios.post("http://localhost:8888/userinfo",this.userinfo).then(({ data })=> {
        console.log(33,this.userinfo)
        if(data>0){
          alert("修改成功")
        }else{
          alert("修改失败")
        }
        
      })
    }
  },
};
</script>

<style scoped>
#btn1{
    background-color: red;
    width: 70%;
    border: none;
}
</style>